<template>
    <view>
        <cu-custom bgColor="bg-white"><block slot="content" class="text-000">选择影院</block></cu-custom>
        <view class="bg-white relative">
            <!--特色筛选开始-->
          <u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
            <search  @search="search" ref="searchRef" :searchParams="searchParams"/>
          </u-sticky>

            <!--列表开始-->
            <view class="padding-lr-sm">
                <view class="flex justify-between solid-bottom padding-tb-sm" @tap="" v-for="(item,index) in data.list" @tap="url(item)" :key="index">
                    <view class="flex flex-direction">
                        <view class="text-000 text-bold margin-bottom-sm" style="overflow: hidden; text-overflow: ellipsis;width: 550rpx;white-space: nowrap">{{item.cinema_name}}</view>
                        <view class="text-gray" style="overflow: hidden;text-overflow: ellipsis;width: 550rpx;white-space: nowrap">{{item.address}}</view>
                    </view>
                    <view class="flex flex-direction">
                        <view class="margin-bottom-sm"><text class="text-red text-bold text-lg margin-right-xs inline-block">{{item.price}}</text><text class="text-gray">元起</text></view>
                        <view class="text-gray text-right" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{item.distance}}</view>
                    </view>
                </view>
            </view>
            <!--/列表结束-->
            <!--加载更多[more|loading|noMore]-->
            <load-more color="#aaa" :status="loadingMoreOptions.loading" iconType="circle" :contentText="context"/>
        </view>
        <!--/上面筛选结束-->
    </view>
</template>

<script>
import loadMore       from "@/components/LoadMore/uni-load-more"
import search         from "./components/search"
import uSticky from '../../components/u-sticky/u-sticky.vue'
    export default {
        data() {
            return {
                data:'',
                options:'',
                current_page:1,
                loadingMoreOptions:{loading:'more'},
                context:{contentrefresh:'',contentnomore:'已经到底啦~'},
                showDialog:false,
                cinemas_feature:'',
                cinemas_area:'',
                area:'',
                CustomBar:this.CustomBar,
                top:(this.CustomBar+30)+'px',
                requestParams:{

                },
                //默认按照距离排序
                searchParams:{
                    sort:'dist'
                },
              enable:true,
              offsetTop:this.CustomBar
            }
        },
        components: {
            loadMore,search,uSticky
        },
        computed: {
            location(){
                return this.$tools.location();
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            async fetchData(param,isSearch=false){
                console.log('fetechData获取参数')
                console.log('isSearch')
                console.log(isSearch)
                this.searchParams  = {...this.searchParams,...param}

                console.log('this.location')
                console.log(this.location)

                console.log('this.searchParams')
                console.log(this.searchParams)
                let requestParams = Object.assign(this.searchParams,
                    {city_name:this.location.city,
                             longitude:this.location.longitude,
                             latitude:this.location.latitude,
                             page:    this.current_page})

                if(isSearch){
                    console.log('搜索页面来的啊！！！！')
                    requestParams['page'] = 1
                }else{
                    console.log('不是搜索页面出来的啊！！！！！！')
                }
                console.log('请求的参数')
                console.log('requestParams')
                console.log(JSON.stringify(requestParams))
                let res  = await this.$api.cinemas(requestParams);
                if(res){
                    //有数据
                    if(requestParams['page']!==1 && this.data.list && this.data.list.length>0){
                        console.log('当前页面有数据')
                        res.data.list = this.data.list.concat(res.data.list)
                    }else{
                        console.log('当前没数据')
                    }
                    this.data = res.data;

                    //分页设置
                    let {current_page,last_page,total} = res.data.meta //分页信息
                    if(current_page>=last_page){
                        this.loadingMoreOptions.loading='noMore' //没有了
                    }
                    //当前
                    this.current_page = current_page
                    //if(total===0)  this.context.contentnomore=''
                }
                console.log('最终赋值的影院列表')
                console.log(res)
                this.data = res.data;


            },
            url(item){
                console.log('url(item)')
                console.log(item)
                let url =  `/pages/cinema/detail?cinema_id=${item.cid}&cinema_name=${item.cinema_name}&show_id=0&show_name=`
                this.$tools.goTo(url)
            },
            //搜索
            search(params){
                //搜索
                this.fetchData(params,true)
            }
        },

    }
</script>

<style>
.nav-img{width:20rpx;height:13rpx;margin-left:10rpx}
.nav-search{width:35rpx;height:35rpx}

</style>